<template>
	<div>
		<Card>
			用户列表
			<Icon type="ios-arrow-forward" /> {{ tabs }}
		</Card>
		<Card>
			<div class="explain">
				<div>
					<img class="avatar" :src="$store.state.userinfo.avatar" />
				</div>
				<div class="text">
					<span>姓名：{{ $store.state.userinfo.name }}</span>
					<br />
					<span>编号：{{ $store.state.userinfo.id }} </span>
				</div>
			</div>
			<Tabs value="name1" @on-click="tabsChange">
				<TabPane label="用户信息" name="name1">
					<user-news :id="this.id"></user-news>
				</TabPane>
				<TabPane label="平台订单" name="name2">
					<user-order :id="this.id"></user-order>
				</TabPane>
				<TabPane label="监理申请" name="name3">
					<supervisor-apply :id="this.id"></supervisor-apply>
				</TabPane>
				<TabPane label="发布帖子" name="name4">
					<send-post :id="this.id"></send-post>
				</TabPane>
				<TabPane label="我的监理" name="name5">
					<my-supervision :id="this.id"></my-supervision>
				</TabPane>
			</Tabs>
		</Card>
	</div>
</template>

<script>
	import path from '@/api/path.js';
	let url = path.url;
	import axios from '@/libs/api.request';
	import userNews from '@/view/user/userNews.vue';
	import userOrder from '@/view/user/userOrder.vue';
	import mySupervision from '@/view/user/mySupervision.vue';
	import supervisorApply from '@/view/user/supervisorApply.vue';
	import sendPost from '@/view/user/sendPost.vue';
	export default {
		data() {
			return {
				id: this.$route.query.id,
				supervisionItem: {},
				tabs: "用户信息"
			}
		},
		methods: {
			tabsChange(name) {
				switch (name) {
					case 'name1':
						this.tabs = '用户信息'
						break;
					case 'name2':
						this.tabs = '平台订单'
						break;
					case 'name3':
						this.tabs = '监理申请'
						break;
					case 'name4':
						this.tabs = '发布帖子'
						break;
					case 'name5':
						this.tabs = '我的监理'
						break;
				}
			},
		},
		created() {
			// 获取用户信息
			this.$store.commit('getUserInfo', this.id)
		},
		// 挂载组件
		components: {
			userNews,userOrder,mySupervision,supervisorApply,sendPost
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.explain {
		display: flex;
		justify-content: flex-start;
		.avatar {
			width: 100px;
			margin: 20px;
		}
		.text {
			margin-top: 20px;
			display: flex;
			flex-direction: column;
		}
	}
</style>
